<template>
	<div class="basic-info">
		<div class="content">
			<div class="select-list">
				<customInput
					v-for="(item, index) in dataOption"
					:prop="item" :key="index"
					@click.native="handleClick(item)"
				/>
			</div>
			<div class="bottom-meun">
				<div class="buttons">
					<button class="sava" @click="handleSava">保存</button>
					<button class="submit" @click="handleNext">下一页</button>
				</div>
			</div>
		</div>

		<transition name="moveR">
			<searchHouse v-show="$route.query.page == 'search'" />
		</transition>

		<van-popup v-model="showPicker"
		 @close="closePickwe"
		 position="bottom">
			<inputList :option="selected"
				@hidePopup="hidePopup"
				@inputSwitch="inputSwitch"
			/>
			<van-picker
				ref="picker" 
				v-if="selected.isPicker"
				:columns="selectItem.columns()"
				@change="popupChange"
			/>
		</van-popup>
		
	</div>
</template>

<script>

import { mapMutations, mapGetters } from 'vuex'
import houseBasicInfo from './houseBasicInfo.vue'
import searchHouse from './searchHouse.vue'
import inputList from './inputList.vue'
import cloneDeep from 'lodash/cloneDeep'
import customInput from './customInput' 
import basicData, { setHouseTypeList } from './basicDataconfig'
import houseType from './houseType'
import * as types from '@/store/mutation-types'

export default {
	data() {
		let type = this.$route.query.type || 'business'
		let dataOption = []
		console.log(basicData)
		basicData.forEach(item => {
			if (item.apply && item.apply.includes(type)) {
				dataOption.push(item)
			}
		})
		return {
			showPicker: false,
			selected: {},
			dataOption
		}
	},
	computed: {
		// ...mapGetters({
    //   getHouseTypeList: 'houseTypeList'
		// }),
		selectItem() {
			return this.selected.field.find(item => item.active)
		}
	},
	created() {
		setTimeout(() => {
			// this.setHouseTypeList(houseType.data)
			setHouseTypeList()
			// console.log(this.getHouseTypeList)
		}, 500)
	},
  methods: {
		// ...mapMutations({
		// 	'setHouseTypeList': types.SET_HOUSE_TYPE_LIST
		// }),
		handleNext() {
			this.$router.push('./houseImageText?type=business')
			console.log(this.dataOption)
		},
		handleSava() {

		},
		inputSwitch(item) {
			if (!item.defaultIndexs) return false
			this.$nextTick(() => {
				this.$refs.picker.setIndexes(item.defaultIndexs)
			})
		},
		handlePopup(list) {
			this.showPicker = true
			this.selected = cloneDeep(list)
			this.inputSwitch(this.selectItem)
		},
		handleClick(list) {
			if (list.event === 'click') {
				if (list.isReadonly) {
					document.activeElement.blur();
					this.handlePopup(list)
				} 
			} else {
				this.$router.push({ query: { page: 'search' }})
			}
		},
		popupChange(picker, value, index) {
			let alias = value
			if (this.selected.plugin) {
				alias = this.selected.plugin(value)
			}
			this.selected.field.forEach((item, index) => {
				if (item.active) {
					item.value = alias
					item.defaultIndexs = this.$refs.picker.getIndexes()
				}
			})
		},
		closePickwe() {
			this.$nextTick(() => {
				window.scroll(0, 0)				
			})
		},
		hidePopup(option) {
			let { id } = option
			option.field.forEach(item => {
				item.isEmpty = !item.value
			})
			this.dataOption.forEach(item => {
				if (item.id === id ) {
					item.field = option.field
				}
			})
			this.showPicker = false
		}
	},
	components: {
		houseBasicInfo,
		searchHouse,
		inputList,
		customInput
	}
}
</script>

<style lang="less" scoped>

.basic-info {
	height: 100%;
	width: 100%;
	.content {
    height: 100%;
		overflow: auto;
		.select-list {
      padding: 0 16px;
		}
		.bottom-meun {
			font-size: 16px;
			padding: 0 16px;
			.buttons {
				padding: 24px 0;
				overflow: hidden;
				.sava {
					height: 44px;
					width: 106px;
					float: left;
					border: 0;
					border-radius: 6px;
					color: #A1A9B9;
					background: #F2F7FD;
				}
				.submit {
					height: 44px;
					width: 220px;
					float: right;
					color: #fff;
					border: 0;
					border-radius: 6px;
					background: #007AE6;
				}
			}
		}
	}
	
}

.moveR-enter-active,  .moveR-leave-active {
	transition: all .2s linear;
	transform: translateX(0);
}
.moveR-enter,  .moveR-leave {
	transform: translateX(100%);
}
.moveR-leave-to{
	transform: translateX(100%);
}

/deep/ .van-picker-column {
	.van-picker-column__item {
		color: #13294F; 
		opacity: 0.3;
	}
	// .van-picker-column__item + .van-picker-column__item--selected,
	.van-picker-column__item--selected + .van-picker-column__item {
		opacity: 0.6;
	}
	.van-picker-column__item--selected {
		opacity: 1;
	}
}
/deep/ .van-hairline--top-bottom::after {
	border-color: #D2D8DD;
}
// /deep/ 

</style>